<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>menu</title>
<link rel="stylesheet"
	th:href="@{/manager/layui/lib/layui-v2.5.5/css/layui.css}"
	href="../lib/layui-v2.5.5/css/layui.css" media="all">
<link rel="stylesheet" th:href="@{/manager/layui/css/public.css}"
	href="../css/public.css" media="all">
<style>
.layui-btn
:not
(.layui-btn-lg
)
:not
(
.layui-btn-sm
)
:not
(
.layui-btn-xs
)
{
height
:
34
px;
line-height:34
px;
padding
:08px;
}
</style>
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<div>
				<div class="layui-btn-group">
					<button class="layui-btn" id="btn-expand">全部展开</button>
					<button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
				</div>
				<table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
			</div>
		</div>
	</div>
	<!-- 操作列 -->
	<script type="text/html" id="auth-state">
	{{# if(d.type == 2){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

	{{# } else{ }}
    <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	{{# } }}
</script>

	<script th:src="@{/manager/layui/lib/layui-v2.5.5/layui.js}"
		src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
	<script th:src="@{/manager/layui/js/lay-config.js?v=1.0.4}"
		src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
	<script>
		layui
				.use(
						[ 'table', 'treetable' ],
						function() {
							var $ = layui.jquery;
							var table = layui.table;
							var treetable = layui.treetable;

							// 渲染表格
							layer.load(2);
							treetable
									.render({
										treeColIndex : 1,
										treeSpid : -1,
										treeIdName : 'id',
										treePidName : 'parentId',
										elem : '#munu-table',
										url : '/group/list',
										page : false,
										cols : [ [
												{
													type : 'numbers'
												},
												{
													field : 'name',
													minWidth : 150,
													title : '分组名称'
												},
												{
													field : 'type',
													width : 80,
													align : 'center',
													templet : function(d) {
														if (d.type == 0) {
															return '<span class="layui-badge layui-bg-red">公司</span>';
														}
														if (d.type == 1) {
															return '<span class="layui-badge layui-bg-orange">部门</span>';
														} else {
															return '<span class="layui-badge-rim layui-bg-blue">科室</span>';
														}
													},
													title : '类型'
												},
												{
													field : 'status',
													width : 80,
													align : 'center',
													templet : function(d) {
														if (d.status == 0) {
															return '<span class="layui-badge layui-bg-blue">正常</span>';
														} else {
															return '<span class="layui-badge-rim layui-bg-gray">禁用</span>';
														}
													},
													title : '状态'
												},
												{
													field : 'sort',
													width : 80,
													align : 'center',
													title : '排序号'
												},
												{
													field : 'createTime',
													width : 200,
													align : 'center',
													title : '时间',
													templet : function(d) {
														return layui.util
																.toDateString(
																		d.createTime * 1000,
																		"yyyy-MM-dd HH:mm:ss");
													}
												}, {
													templet : '#auth-state',
													width : 200,
													align : 'center',
													title : '操作'
												} ] ],
										done : function() {
											layer.closeAll('loading');
										}
									});

							$('#btn-expand').click(function() {
								treetable.expandAll('#munu-table');
							});

							$('#btn-fold').click(function() {
								treetable.foldAll('#munu-table');
							});

							//监听工具条
							table.on('tool(munu-table)', function(obj) {
								var data = obj.data;
								var layEvent = obj.event;

								if (layEvent === 'add') {
									var index = layer.open({
										title : '添加分组',
										type : 2,
										shade : 0.2,
										maxmin : true,
										shadeClose : true,
										area : [ '50%', '70%' ],
										content : '/group/toAdd?type='
												+ data.type + "&parentId="
												+ data.id,
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
								} else if (layEvent === 'del') {
									layer.confirm('确定要删除？', {
										icon : 3,
										title : '删除'
									}, function(index) {
										layer.close(index);
										$.ajax({
											url : "/group/del",
											data : {
												"id" : data.id
											},
											dataType : "json",
											type : "post",
											success : function(result) {
												layer.alert("删除成功", function() {
													parent.window.location
															.reload();
												});
											}
										});
									});

								} else if (layEvent === 'edit') {
									var index = layer.open({
										title : '修改分组',
										type : 2,
										shade : 0.2,
										maxmin : true,
										shadeClose : true,
										area : [ '50%', '70%' ],
										content : '/group/toModify?id='
												+ data.id,
									});
									$(window).on("resize", function() {
										layer.full(index);
									});
								}
							});
						});
	</script>
</body>
</html>